<template>
  <view class="tt-loading-comp" v-if="visible">
    <view class="tt-loading-wrapper">
      
      <view class="icon-img-wrapper">
        <view class="bg">
          <image class="img" :src="staticImgs.loadingBg" mode=""></image>
        </view>
        <view class="front">
          <image class="img" :src="staticImgs.loadingImg" mode=""></image>
        </view>
      </view>
      <view style="width: 90rpx;"></view>
      <view class="text">加载中...</view>
    </view>
  </view>
</template>

<script>
  export default {
    data(){
      return{
        staticImgs:{
          loadingImg:require('@/static/images/loading-icon.png'),
          loadingBg:require('@/static/images/loading-icon-bg.png'),
        },
        visible:false,
      }
    },
    methods:{
      show(){
        this.visible = true
      },
      hide(){
        this.visible = false
      }
    },
  }
</script>

<style lang="scss" scoped>

@keyframes roateD{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.tt-loading-comp{
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: linear-gradient( 180deg, rgba(127,128,127,0) 0%, rgba(44,97,125,1) 100%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  .tt-loading-wrapper{
    display: flex;
    justify-content: center;
    
    // align-items: center;
  
    .icon-img-wrapper{
      position: relative;
    }
    .front{
      width: 90rpx;
      height: 90rpx;
      position: absolute;
      z-index: 1;
      // left: 50%;
      top: 0;
      // transform: translate(-50%,-50%);
      
      .img{
        width: 100%;
        height: 100%;
      }
    }
    
    .bg{
      width: 90rpx;
      height: 90rpx;
      position: absolute;
      z-index: 0;
      // left: 50%;
      top: 2rpx;
      // transform: translate(-50%,-50%);
      animation: roateD 1s linear infinite;
      
      .img{
        width: 100%;
        height: 100%;
      }
    }
    
    .text{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 40rpx;
      color: #FFFFFF;
      line-height: 98rpx;
      text-align: justify;
      font-style: normal;
      margin-left: 14rpx;
      
      opacity: .91;
    }
    
  }
}
</style>